import * as ds from 'admin/services/dataSource';
import { createGridView, boundField, commandField } from 'myWuZhui';
// import app from 'admin/application';
import { siteMap } from 'admin/pageNodes';
import React = require('react');
import ReactDOM = require('react-dom');
import * as chitu from "maishu-chitu";

export default function (page: chitu.Page) {
    ReactDOM.render(<ProductTemplates app={page.app as chitu.Application} />, page.element);
}

class ProductTemplates extends React.Component<{ app: chitu.Application }, any> {
    templatesTable: HTMLTableElement;
    componentDidMount() {
        let gridview = createGridView({
            element: this.templatesTable,
            dataSource: ds.productTemplate,
            columns: [
                boundField({ dataField: 'id', visible: false }),
                boundField({ dataField: 'name', headerText: '名称' }),
                commandField({
                    headerStyle: { width: '120px' } as CSSStyleDeclaration,
                    leftButtons: (dataItem: PageData) => [
                        <button className="btn btn-minier btn-info"
                            onClick={() => this.props.app.redirect(siteMap.nodes.station_page.name, { pageId: dataItem.id })}>
                            <i className="icon-pencil"></i>
                        </button>
                    ]
                })
            ]
        })
        ds.productTemplate.select();
    }
    render() {
        return [
            <div key={10} className="tabbable">
                <ul className="nav nav-tabs">
                    <li className="pull-right">
                        <button className="btn btn-sm btn-primary"
                            onClick={() => this.props.app.redirect(siteMap.nodes.station_productTemplate.name)}>
                            <i className="icon-plus" />
                            <span>添加</span>
                        </button>
                    </li>
                </ul>
            </div>,
            <table key={20} ref={(e: HTMLTableElement) => this.templatesTable = e || this.templatesTable} />
        ];
    }
} 